<template>
  <section
    class="cell-title"
    :class="{ full: isFull }"
    v-bind="$attrs"
    :style="{'background-color': backgroundColor,
             height:compHeight,
             backgroundImage: `url(${titleImage})`,backgroundSize :titleWidth +' '+ height}
    "
  >
    <!--    <img
      v-if="titleImage"
      :src="titleImage"
      alt=""
      :style="{
        'width': titleWidth,
        'height': height,
      }"
      class="titleImg"
    >-->
    <div class="cell-title-icon">
      <img
        v-if="iconImage"
        :src="iconImage"
        alt=""
        :style="{
          width: iconWidth,
          height: iconheight,
        }"
      >
      <div
        class="page-title etc"
        :style="{
          color: titleColor,
          fontFamily,
          fontSize
        }"
      >
        {{ isShowModuleName ? title : "" }}
      </div>
    </div>
    <div v-if="!hideDesc" class="paeg-more" @click="go">
      <span>查看更多</span>
    </div>
  </section>
</template>

<script>
import mixins from '../mixins'

export default {
  name: 'Kcxx',
  mixins: [mixins],
  props: {
    title: {
      type: String,
      default: ''
    },
    hideDesc: {
      type: Boolean,
      default: false
    },
    isFull: {
      type: Boolean,
      default: false
    },
    nextUrl: {
      type: String,
      default: ''
    },
    linkName: {
      type: String,
      default: 'moreLink'
    },
    option: {
      type: Object,
      default() {
        return {}
      }
    }

  },
  computed: {
    // icon图
    iconImage() {
      return this.option.iconImage
    },
    // 标题图标宽
    iconWidth() {
      return this.px2rem(this.option.iconWidth || 0)
    },
    // 标题图标高
    iconheight() {
      return this.px2rem(this.option.iconheight || 0)
    },
    // 标题颜色
    titleColor() {
      return this.option.titleColor
    },
    // 标题背景图
    titleImage() {
      return this.option.titleImage
    },
    // 标题背景宽
    titleWidth() {
      return this.px2rem(this.option.titleWidth || 0)
    },
    // 标题背景高
    height() {
      return this.px2rem(this.option.height || 0)
    },
    compHeight() {
      return this.px2rem(this.option.compHeight || 98)
    },
    // 标题字体样式
    fontFamily() {
      return this.option.fontFamily
    },
    // 标题字体大小
    fontSize() {
      return this.px2rem(this.option.fontSize || 30)
    }
  },
  methods: {
    go() {
      this.toDetail({}, this.linkName)
    }
  }
}
</script>

<style lang="scss">
@import "@/styles/utility/rem.scss";

.cell-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: rem(98);
  background-color: #fff;
  border-radius: rem(16) rem(16) 0 0;
  position: relative;
  background-repeat: no-repeat;
 /* .titleImg {
    // margin-left: rem(16);
    position: absolute;
    z-index: 1;
  }*/
  &.full {
    position: absolute;
    left: 0;
    right: 0;

    .page-title {
      padding-left: rem(21);
    }

    .paeg-more {
      padding-right: rem(19);
    }
  }
  .cell-title-icon {
    display: flex;
    align-items: center;
    padding-left: rem(15);
    //z-index: 2;
    .page-title {
      font-size: rem(32);
      font-weight: bold;
      color: #222222;
      flex: 1;
      max-width: rem(500);
    }
  }

  .paeg-more {
    flex: 0 0 auto;
    font-size: rem(26);
    font-weight: 400;
    color: #999999;
  }
}
</style>
